<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>第三方授权</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

    <style>
        .row-container .row {
            height: 54px;
            line-height: 54px;
        }

        .row-container .row .row-icon {
            width: 30px;
            height: 30px;
            margin-top: 12px;
        }

        .row-container .row .row-arrow {
            margin-top: 21px;
        }

        .row-container .row > span:last-child {
            font-size: 12px;
        }
    </style>

</head>
<body>
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">第三方授权</span>
</div>
<div id="app" class="main-container" v-cloak>
    <div class="row-container">
        <a class="row" v-myclick="['tb', auth_common]" v-row-active>
            <img class="row-icon" v-src="'../../image/authorize_icon_taobao.png'">
            <span>淘宝授权</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span :style="{color:ifAuth.tb?'#000':'#aaa'}">{{ifAuth.tb?'已授权':'未授权'}}</span>
        </a>
        <a class="row" v-myclick="['jd', auth_common]" v-row-active>
            <img class="row-icon" v-src="'../../image/authorize_icon_jing.png'">
            <span>京东授权</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span :style="{color:ifAuth.jd?'#000':'#aaa'}">{{ifAuth.jd?'已授权':'未授权'}}</span>
        </a>
        <a class="row" v-myclick="['wx', auth_common]" v-if="appInstalled.wx" v-row-active>
            <img class="row-icon" v-src="'../../image/authorize_icon_wechat.png'">
            <span>微信授权</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span :style="{color:ifAuth.wx?'#000':'#aaa'}">{{ifAuth.wx?'已授权':'未授权'}}</span>
        </a>
        <a class="row" v-myclick="['qq', auth_common]" v-if="appInstalled.qq" v-row-active>
            <img class="row-icon" v-src="'../../image/authorize_icon_qq.png'">
            <span>QQ授权</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span :style="{color:ifAuth.qq?'#000':'#aaa'}">{{ifAuth.qq?'已授权':'未授权'}}</span>
        </a>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>

    var bindInfos,
        vm,
        jd,
        wx,
        aliTradePlus,
        qq;
    apiready = function () {
        setBSImg();
        showProgress();
        new Vue({
            el: '#blank'
        });
        wx = api.require('wx');
        jd = api.require('jd');
        aliTradePlus = api.require('webBrowser');
        qq = api.require('QQPlus');

        var callback = function (ret) {
            bindInfos = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.get(URL.getBindInfos, callback);
        addListeners();

    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                bindInfos: bindInfos,
                appInstalled: {
                    wx: true,
                    qq: true,
                }
            },
            computed: {
                ifAuth: function () {
                    return {
                        tb: this.bindInfos.tb == '1',
                        jd: this.bindInfos.jd == '1',
                        wx: this.bindInfos.wx == '1',
                        qq: this.bindInfos.qq == '1'
                    }
                },
            },
            methods: {
                auth_common: function (authApp) {
                    var fn;
                    var name;
                    switch (authApp) {
                        case 'tb':
                            fn = this.auth_tb;
                            name = '淘宝';
                            break;
                        case 'jd':
                            fn = this.auth_jd;
                            name = '京东';
                            break;
                        case 'wx':
                            fn = this.auth_wx;
                            name = '微信';
                            break;
                        case 'qq':
                            fn = this.auth_qq;
                            name = 'QQ';
                            break;
                        default:
                            alert('参数错误');
                            break;
                    }
                    if (this.ifAuth[authApp]) {
                        var msg = '已绑定' + name + ',是否解绑?';
                        pinet.confirm('提示', msg, fn);
                    } else {
                        fn();
                    }
                },
                auth_wx: function () {
                    if (this.ifAuth.wx) {
                        var data = {
                            oauth: 'Weixin'
                        };
                        var callback = function () {
                            vm.bindInfos.wx = '0';
                            alert('解绑成功');
                        };
                        pinet.post(URL.OauthCancelBind, data, callback);
                    } else {
                        wx.auth({}, function (ret) {
                            if (!ret.status) {
                            } else {
                                wx.getToken({
                                    code: ret.code
                                }, function (ret, err) {
                                    if (!ret.status) {
                                        alert('获取授权 accessToken失败:' + err.code);
                                    } else {
                                        wx.getUserInfo({
                                            accessToken: ret.accessToken,
                                            openId: ret.openId
                                        }, function (ret, err) {
                                            if (!ret.status) {
                                                alert('获取用户信息失败:' + err.code);
                                            } else {
                                                var data = {
                                                    openid: ret.openid,
                                                    oauth: 'Weixin',
                                                    unionid: ret.unionid || ''
                                                };
                                                var callback = function () {
                                                    vm.bindInfos.wx = '1';
                                                    alert('绑定成功');
                                                };
                                                pinet.post(URL.oauthBind, data, callback);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                },
                auth_jd: function () {
                    if (this.ifAuth.jd) {
                        var data = {
                            oauth: 'Jd'
                        };
                        var callback = function () {
                            vm.bindInfos.jd = '0';
                            alert('解绑成功');
                        };
                        pinet.post(URL.OauthCancelBind, data, callback);
                    } else {
                        jd.login({}, function (ret) {
                            if (ret) {
                                showProgress();
                                var data = {
                                    openid: ret.uid,
                                    oauth: 'Jd'
                                };
                                var callback = function () {
                                    vm.bindInfos.jd = '1';
                                    alert('绑定成功');
                                };
                                pinet.post(URL.oauthBind, data, callback);
                            }
                        });
                    }
                },
                auth_tb: function () {
                    if (this.ifAuth.tb) {
                        var data = {
                            oauth: 'Taobao'
                        };
                        var callback = function () {
                            aliTradePlus.logout(function (ret) {
                            });
                            vm.bindInfos.tb = '0';
                            alert('解绑成功');
                        };
                        pinet.post(URL.OauthCancelBind, data, callback);
                    } else {
                        aliTradePlus.showLogin(function (ret, err) {
                            if (!ret && err && err.code == 1) {
                                setTimeout(vm.auth_tb, 300);
                            }
                            if (ret && ret.openId) {
                                showProgress();
                                var data = {
                                    openid: ret.openId,
                                    oauth: 'Taobao'
                                };
                                var callback = function () {
                                    vm.bindInfos.tb = '1';
                                    alert('绑定成功');
                                };
                                pinet.post(URL.oauthBind, data, callback);
                            }
                        });
                    }
                },
                auth_qq: function () {
                    if (this.ifAuth.qq) {
                        var data = {
                            oauth: 'Qq'
                        };
                        var callback = function () {
                            vm.bindInfos.qq = '0';
                            alert('解绑成功');
                        };
                        pinet.post(URL.OauthCancelBind, data, callback);
                    } else {
                        qq.login(function (ret, err) {
                            if (ret.status) {
                                var data = {
                                    openid: ret.openId,
                                    oauth: 'Qq',
                                    unionid: ret.unionid || ''
                                };
                                var callback = function () {
                                    vm.bindInfos.qq = '1';
                                    alert('绑定成功');
                                };
                                pinet.post(URL.oauthBind, data, callback);
                            }
                        });
                    }
                }
            },
            created: function () {
                var that = this;
                wx.isInstalled(function (ret) {
                    that.appInstalled.wx = ret.installed;
                });
                qq.installed(function (ret) {
                    that.appInstalled.qq = ret.status;
                });
            }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>